var OtherTableItem = function () {
  var template = /* html */ `
    <div class="other-table-item drag-cancel-el" :class="{'is-width-resize':isWidthResize,'is-height-resize':isHeightResize,'is-print':isPrint}" @mousemove="handleMouseMove"
      @mousedown="handleMouseDown">
      <table cellspacing="0" cellpadding="0" ref="otherTable">
        <template v-for="(width,index) in config.widthList">
          <col :key="'col_'+index" :width="width">
        </template>
        <tbody>
          <template v-for="(height,rowIndex) in config.heightList">
          <tr :key="'row_'+rowIndex" :style="{'height':height+'px'}">
            <template v-for="(width,colIndex) in config.widthList">
            <td :key="'col_'+colIndex" :class="{'no-height-resize':rowIndex===config.heightList.length-1,'no-width-resize':colIndex===config.widthList.length-1}"
              @dblclick="editRichText(rowIndex,colIndex)">
              <div class="other-table-rich">
                <div class="rich-editor">
                  <div class="vue-rich-editor" v-html="tableData[rowIndex][colIndex]"></div>
                </div>
              </div>
            </td>
            </template>
          </tr>
          </template>
        </tbody>
      </table>

      <template v-if="!isPrint">
      <div v-show="dragging&&isWidthResize" :style="{left:proxyWidth+'px'}" class="table-width-resize-proxy"></div>
      <div v-show="dragging&&isHeightResize" :style="{top:proxyHeight+'px'}" class="table-height-resize-proxy"></div>
      </template>
    </div>
  `;

  return {
    props: {
      config: {
        type: Object,
        required: true
      },
      isPrint: {
        type: Boolean,
        default: true
      }
    },

    watch: {
      'config.height': function () {
        this.resetHeight();
      },
      'config.width': function () {
        this.resetWidth();
      }
    },

    computed: {
      tableData: function () {
        return this.config.tableData;
      }
    },

    data: function () {
      return {
        isWidthResize: false,
        isHeightResize: false,
        dragging: false,
        proxyWidth: 0,
        proxyHeight: 0,
        dragData: null,
        tableEl: null,
        isShowData: false
      };
    },

    mounted: function () {
      this.tableEl = this.$refs['otherTable'];

      var self = this;
      setTimeout(function () {
        self.resetWidth();
        self.isShowData = true;
      }, 200);
    },

    methods: {
      resetHeight: function () {
        this.config.resetHeight();
      },

      resetWidth: function () {
        var $table = $(this.tableEl);
        var $col = $table.find('tr:eq(0) td');
        this.config.resetWidth($col);
      },

      handleMouseMove: function (event) {
        if (this.isPrint || this.dragging) {
          return;
        };

        var target = event.target;
        while (target && target.tagName !== 'TD') {
          target = target.parentNode;
        }
        if (target === null) {
          this.isWidthResize = false;
          this.isHeightResize = false;
          return;
        }

        var notWidth = $(target).hasClass('no-width-resize');
        var notHeight = $(target).hasClass('no-height-resize');
        if (notWidth && notHeight) {
          this.isWidthResize = false;
          this.isHeightResize = false;
          return;
        }

        var rect = SysUtil.getElRect(target);
        if (!notWidth && rect.width > 12 && rect.right - event.pageX < 8) {
          this.isWidthResize = true;
          this.isHeightResize = false;
          return;
        }

        this.isWidthResize = false;
        if (!notHeight && rect.height > 20 && rect.bottom - event.pageY < 8) {
          this.isHeightResize = true;
        } else {
          this.isHeightResize = false;
        }
      },

      handleMouseDown: function (event) {
        if (!this.isWidthResize && !this.isHeightResize) {
          return;
        }

        var target = event.target;
        if (this.isWidthResize) {
          while (target && target.tagName !== 'TD') {
            target = target.parentNode;
          }
        } else {
          while (target && target.tagName !== 'TR') {
            target = target.parentNode;
          }
        }
        if (target === null) {
          return;
        }

        var dragData = {
          dragEl: target,
          pageData: undefined
        };
        var rect = SysUtil.getElRect(target);
        if (this.isWidthResize) {
          dragData.minLeft = rect.left + 50;
          var nextEl = target.nextElementSibling;
          var nextRect = SysUtil.getElRect(nextEl);
          dragData.maxRight = nextRect.right - 50;
          dragData.nextEl = nextEl;
        } else {
          dragData.minTop = rect.top + 30;
          var nextEl = target.nextElementSibling;
          var nextRect = SysUtil.getElRect(nextEl);
          dragData.maxBottom = nextRect.bottom - 30;
          dragData.nextEl = nextEl;
        }

        this.dragData = dragData;

        this.dragging = true;
        document.onselectstart = function () {
          return false;
        };
        document.ondragstart = function () {
          return false;
        };
        document.addEventListener('mousemove', this.tableResizeing);
        document.addEventListener('mouseup', this.toResizeSize);
      },

      tableResizeing: function (event) {
        var pageX = event.pageX;
        var pageY = event.pageY;
        var dragData = this.dragData;
        var tableEl = this.tableEl;
        var tableRect = SysUtil.getElRect(tableEl);
        if (this.isWidthResize) {
          if (pageX < dragData.minLeft || pageX > dragData.maxRight) {
            return;
          }
          var proxyWidth = pageX - tableRect.left;
          this.proxyWidth = proxyWidth;
          dragData.pageData = pageX;
        } else {
          if (pageY < dragData.minTop || pageY > dragData.maxBottom) {
            return;
          }
          var proxyHeight = pageY - tableRect.top;
          this.proxyHeight = proxyHeight;
          dragData.pageData = pageY;
        }
      },

      toResizeSize: function () {
        var dragData = this.dragData;
        var dragEl = dragData.dragEl;
        var dragRect = SysUtil.getElRect(dragEl);
        var rangeSize = null;
        if (this.isWidthResize) {
          var pageX = dragData.pageData;
          if (pageX !== undefined) {
            rangeSize = pageX - dragRect.right;
          }
        } else {
          var pageY = dragData.pageData;
          if (pageY !== undefined) {
            rangeSize = pageY - dragRect.bottom;
          }
        }

        if (rangeSize !== null) {
          this.resizeSize($(dragEl).index(), rangeSize);
        }

        document.removeEventListener('mousemove', this.tableResizeing);
        document.removeEventListener('mouseup', this.toResizeSize);
        document.onselectstart = null;
        document.ondragstart = null;
        this.isWidthResize = false;
        this.isHeightResize = false;
        this.dragData = null;
        this.dragging = false;
      },

      resizeSize: function (index, value) {
        if (this.isWidthResize) {
          var widthList = this.config.widthList;
          widthList[index] += value;
          widthList[index + 1] -= value;
        } else {
          var heightList = this.config.heightList;
          heightList[index] += value;
          heightList[index + 1] -= value;
        }
      },

      editRichText: function (rowIndex, colIndex) {
        if (this.isPrint) {
          return;
        }
        var tableData = this.tableData;
        this.$emit('edit-rich-text', {
          tableData: tableData,
          rowIndex: rowIndex,
          colIndex: colIndex
        });
      }
    },

    components: {
      ShowTextarea: ShowTextarea
    },

    template: template
  };
}();
